<template>
  <el-dialog
    title=""
    :visible.sync="visible"
    :width="popWidth + 'px'"
    append-to-body
    :before-close="handleClose"
  >
    <div class="type1" v-if="type == 0">
      <div class="type1-item" v-for="(item, index) in extremumArr" :key="index">
        <img :src="item.logo" alt="" />
        <div class="name">{{ item.name }}</div>
        <div class="num">{{ item.num }}</div>
        <el-rate v-model="item.rate" :colors="colors" disabled> </el-rate>
      </div>
    </div>
    <i @click="handleClose" class="el-icon-close"></i>
    <div class="type2" v-if="type == 1">
      <div class="type2-head">
        <div class="name">{{ deptObj.name }}</div>
        <el-rate v-model="deptObj.rate" disabled> </el-rate>
      </div>
      <div class="type2-content">
        <el-row>
          <el-col :span="24">
            <el-tabs
              ref="tabs"
              v-model="activeName"
              class="text-tabs TTB-no-gutter TTB-gutter"
              @tab-click="tabChange"
            >
              <el-tab-pane label="电耗" name="1"></el-tab-pane>
              <el-tab-pane label="水耗" name="2"></el-tab-pane>
            </el-tabs>
          </el-col>
        </el-row>
        <Title v-show="activeName == '1'" name="智能物联" :line="false">
          <el-row :gutter="20">
            <el-col class="textS textR" :span="12">
              <span>配备率(%)</span>
            </el-col>
            <el-col class="textS textL" :span="12">
              <span>{{ eData.equipmentPercent }}</span>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col class="textS textR" :span="12">
              <span>实际电耗(kwh)</span>
            </el-col>
            <el-col class="textS textL" :span="12">
              <span>{{ eData.emeterTotal }}</span>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col class="textS textR" :span="12">
              <span>实际能耗(khce)</span>
            </el-col>
            <el-col class="textS textL" :span="12">
              <span>{{ eData.energyTotal }}</span>
            </el-col>
          </el-row>
        </Title>
        <Title
          style="margin-top: 10px"
          v-show="activeName == '1'"
          name="智能诊断"
          :line="false"
        >
          <el-row :gutter="20">
            <el-col class="textS textR" :span="12">
              <span>额度超支(kgce/㎡)</span>
            </el-col>
            <el-col class="textS textL" :span="12">
              <span>{{ eData.baseValExceed }}</span>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col class="textS textR" :span="12">
              <span>预算超支(元)</span>
            </el-col>
            <el-col class="textS textL" :span="12">
              <span>{{ eData.budgetOver }}</span>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col class="textS textR" :span="12">
              <span>设备预警(次)</span>
            </el-col>
            <el-col class="textS textL" :span="12">
              <span>{{ eData.waringTimes }}</span>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col class="textS textR" :span="12">
              <span>工作违规(次)</span>
            </el-col>
            <el-col class="textS textL" :span="12">
              <span>{{ eData.workWaringTimes }}</span>
            </el-col>
          </el-row>
        </Title>
        <Title
          style="margin-top: 10px"
          v-show="activeName == '1'"
          name="碳中和"
          :line="false"
        >
          <el-row :gutter="20">
            <el-col class="textS textR" :span="12">
              <span>清洁能源(kgce)</span>
            </el-col>
            <el-col class="textS textL" :span="12">
              <span>{{ eData.cleanEnergy }}</span>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col class="textS textR" :span="12">
              <span>绿色电力(kgce)</span>
            </el-col>
            <el-col class="textS textL" :span="12">
              <span>{{ eData.greenEmeter }}</span>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col class="textS textR" :span="12">
              <span>碳汇(kgce)</span>
            </el-col>
            <el-col class="textS textL" :span="12">
              <span>{{ eData.carbonTotal }}</span>
            </el-col>
          </el-row>
        </Title>
        <Title v-show="activeName == '2'" name="智能物联" :line="false">
          <el-row :gutter="20">
            <el-col class="textS textR" :span="12">
              <span>配备率(%)</span>
            </el-col>
            <el-col class="textS textL" :span="12">
              <span>{{ wData.equipmentPercent }}</span>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col class="textS textR" :span="12">
              <span>实际水耗(kwh)</span>
            </el-col>
            <el-col class="textS textL" :span="12">
              <span>{{ wData.waterTotal }}</span>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col class="textS textR" :span="12">
              <span>实际能耗(khce)</span>
            </el-col>
            <el-col class="textS textL" :span="12">
              <span>{{ wData.energyTotal }}</span>
            </el-col>
          </el-row>
        </Title>
        <Title
          style="margin-top: 10px"
          v-show="activeName == '2'"
          name="智能诊断"
          :line="false"
        >
          <el-row :gutter="20">
            <el-col class="textS textR" :span="12">
              <span>人均同比</span>
            </el-col>
            <el-col class="textS textL" :span="12">
              <span>{{ wData.waterTB }}</span>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col class="textS textR" :span="12">
              <span>人均环比</span>
            </el-col>
            <el-col class="textS textL" :span="12">
              <span>{{ wData.waterHB }}</span>
            </el-col>
          </el-row>
        </Title>
      </div>
      <!-- <div class="type2-table">
        <el-table :data="deptObj.tableData">
          <el-table-column
            prop="energyType"
            label="能耗类型"
            align="center"
            width="200px"
          >
            <template slot-scope="scope">
              <dict-tag
                :options="dict.type.energy_type"
                :value="scope.row.energyType"
              />
            </template>
          </el-table-column>
          <el-table-column prop="energyTotal" label="实际能耗" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.energyTotal }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="energyQuota"
            label="额度值"
            align="center"
          ></el-table-column>
          <el-table-column prop="baseValExceed" label="超支" align="center">
            <template slot="header">
              <div class="header-flex">
                <div>超支</div>
                <img src="@/assets/images/index/icon-danger.png" alt="" />
              </div>
            </template>
          </el-table-column>
          <el-table-column label="碳中和措施" align="center" width="200px">
            <template slot="header">
              <div class="header-flex">
                <div>碳中和措施</div>
                <img src="@/assets/images/index/icon-good.png" alt="" />
              </div>
            </template>
            <template slot-scope="scope">
              <div class="measure">
                <div
                  class="measure-inline"
                  v-if="scope.row.cleanEnergyList.length > 0"
                >
                  <dict-tag
                    v-for="(item, index) in scope.row.cleanEnergyList"
                    :key="index"
                    :options="dict.type.energy_clean_power"
                    :value="item"
                  />
                </div>
                <div
                  class="measure-inline"
                  v-if="scope.row.greenPowerList.length > 0"
                >
                  <dict-tag
                    v-for="(item, index) in scope.row.greenPowerList"
                    :key="index"
                    :options="dict.type.energy_green_power"
                    :value="item"
                  />
                </div>
                <div
                  class="measure-inline"
                  v-if="scope.row.carbonSinkList.length > 0"
                >
                  <dict-tag
                    v-for="(item, index) in scope.row.carbonSinkList"
                    :key="index"
                    :options="dict.type.energy_carbon_power"
                    :value="item"
                  />
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div> -->
    </div>
    <!-- <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submit" size="small">确 定</el-button>
      <el-button @click="handleClose" size="small">取 消</el-button>
    </div> -->
  </el-dialog>
</template>

<script>
import {
  getTargetDept,
  getDeptStatisticsDetail,
  getmsgByDept,
} from "@/api/index/index";
import { deepClone, dealElectricity } from "@/utils/index";
export default {
  components: {},
  props: {
    visible: { type: Boolean, default: false },
    type: { type: Number, default: 0 }, // 0 步骤显示极值  1 部门个例
    deptID: { type: [Number, String], default: "0", require: false },
    stepType: { type: Number, default: 1, require: false },
  },
  dicts: [
    "energy_type",
    "energy_clean_power", // 清洁能源类型
    "energy_green_power", // 绿色能源类型
    "energy_carbon_power", // 碳汇能源类型
  ],
  data() {
    return {
      popWidth: 400,
      extremumArr: [
        {
          name: "",
          logo: require("@/assets/images/index/champion.png"),
          num: 0,
          rate: 4,
        },
        {
          name: "",
          logo: require("@/assets/images/index/crry.png"),
          num: 0,
          rate: 1,
        },
      ],
      colors: ["#FF5252", "#FF5252", "#FF5252", "#FF5252", "#FF5252"],
      // form: {},
      deptObj: {
        name: "",
        rate: 4,
        tableData: [],
      },
      activeName: "1",
      // 电水耗数据
      eData: {},
      wData: {},
    };
  },
  watch: {
    visible(value) {
      if (value) {
        this.judgeType();
      }
    },
  },
  created() {},
  methods: {
    tabChange() {
      // console.log(this.activeName);
    },
    judgeType() {
      this.activeName = "1";
      this.eData = {};
      this.wData = {};
      if (this.type == 0) {
        this.popWidth = 400;
        this.getExtremum();
      } else if (this.type == 1) {
        this.popWidth = 400;
        // this.getDept();
        this.getDeptewmsg();
      }
    },
    // 获取极值
    getExtremum() {
      // console.log(this.stepType);
      getTargetDept(this.stepType)
        .then((res) => {
          if (res.code === 700) {
            this.$message.warning(res.msg);
            return false;
          }
          let arr = res?.data ?? [];
          if (arr.length == 2) {
            this.extremumArr[0].name = arr[0]?.deptName ?? "暂无最优机构";
            this.extremumArr[0].num = Number(
              arr[0]?.contrastValue ?? 0
            ).toFixed(2);
            this.extremumArr[0].rate = arr[0]?.provincialAssessment ?? 0;
            this.extremumArr[1].name = arr[1]?.deptName ?? "暂无最差机构";
            this.extremumArr[1].num = Number(
              arr[1]?.contrastValue ?? 0
            ).toFixed(2);
            this.extremumArr[1].rate = arr[1]?.provincialAssessment ?? 0;
          }
        })
        .catch((err) => {
          // this.$message.error("系统错误,请联系管理员!200981");
        });
    },
    // 获取单位个例
    // getDept() {
    //   // console.log(this.deptID, "dept");
    //   getDeptStatisticsDetail(this.deptID)
    //     .then((res) => {
    //       if (res.code === 700) {
    //         this.$message.warning(res.msg);
    //         return false;
    //       }
    //       this.deptObj.name = res?.data?.deptName ?? "";
    //       this.deptObj.rate = res?.data?.level ?? 0;
    //       let arr = res?.data?.energyUsedDetailList ?? [];
    //       this.tableDataDeal(arr);
    //     })
    //     .catch((err) => {
    //       // this.$message.error("系统错误,请联系管理员!200982");
    //     });
    // },
    // 根据部门获取电水耗信息
    getDeptewmsg() {
      getmsgByDept(this.deptID)
        .then((res) => {
          console.log(res, "ewmsg");
          if (res.code === 700) {
            this.$message.warning(res.msg);
            return false;
          }
          this.deptObj.name = res?.data?.deptName ?? "";
          this.deptObj.rate = res?.data?.provincialAssessment ?? 0;
          this.ewDataDeal(res?.data ?? {});
        })
        .catch((err) => {
          // this.$message.error("系统错误,请联系管理员!200983");
        });
    },
    // 电水数据处理
    ewDataDeal(data) {
      let emeterEnergyInfoVo = data?.emeterEnergyInfoVo ?? {}; // 电耗数据
      let waterEnergyInfoVo = data?.waterEnergyInfoVo ?? {}; // 水耗数据
      this.eData.equipmentPercent = emeterEnergyInfoVo?.equipmentPercent ?? 0; // 电-配备率
      this.eData.emeterTotal = emeterEnergyInfoVo?.emeterTotal ?? 0; // 电-实际电耗
      this.eData.energyTotal = emeterEnergyInfoVo?.energyTotal ?? 0; // 电-实际能耗
      this.eData.baseValExceed = emeterEnergyInfoVo?.baseValExceed ?? 0; // 电-额度超支
      this.eData.budgetOver = emeterEnergyInfoVo?.budgetOver ?? 0; // 电-预算超支
      this.eData.waringTimes = emeterEnergyInfoVo?.waringTimes ?? 0; // 电-设备预警
      this.eData.workWaringTimes = emeterEnergyInfoVo?.workWaringTimes ?? 0; // 电-工作违规
      this.eData.cleanEnergy = emeterEnergyInfoVo?.cleanEnergy ?? 0; // 电-清洁能源
      this.eData.greenEmeter = emeterEnergyInfoVo?.greenEmeter ?? 0; // 电-绿色电力
      this.eData.carbonTotal = emeterEnergyInfoVo?.carbonTotal ?? 0; // 电-碳汇
      this.wData.equipmentPercent = waterEnergyInfoVo?.equipmentPercent ?? 0; // 水-配备率
      this.wData.waterTotal = waterEnergyInfoVo?.waterTotal ?? 0; // 水-实际水耗
      this.wData.energyTotal = waterEnergyInfoVo?.energyTotal ?? 0; // 水-实际能耗
      let lastMonthWater = waterEnergyInfoVo?.lastMonthWater ?? 0; // 上月水耗
      let lastYearWater = waterEnergyInfoVo?.lastYearWater ?? 0; // 去年同月水耗
      let lastLastMonthWater = waterEnergyInfoVo?.lastLastMonthWater ?? 0; // 上上月水耗
      if (lastYearWater == 0) {
        this.wData.waterTB = "0.00"; // 水-人均同比
      } else {
        this.wData.waterTB = dealElectricity(
          (lastMonthWater - lastYearWater) / lastYearWater,
          1,
          2
        );
      }
      if (lastLastMonthWater == 0) {
        this.wData.waterHB = "0.00"; // 水-人均环比
      } else {
        this.wData.waterHB = dealElectricity(
          (lastMonthWater - lastLastMonthWater) / lastLastMonthWater,
          1,
          2
        );
      }
    },
    // tableDataDeal(arr) {
    //   if (arr.length > 0) {
    //     arr.map((item) => {
    //       item.carbonSinkList = this.splitString(item?.carbonSinkList ?? "");
    //       item.cleanEnergyList = this.splitString(item?.cleanEnergyList ?? "");
    //       item.greenPowerList = this.splitString(item?.greenPowerList ?? "");
    //     });
    //   }
    //   this.deptObj.tableData = [...arr];
    //   console.log(this.deptObj.tableData);
    // },
    splitString(list) {
      let arr;
      if (list != "") {
        arr = list.split(",");
      } else {
        arr = [];
      }
      return arr;
    },
    handleClose() {
      this.resetForm("form");
      this.$emit("close", false);
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .text-tabs {
  .el-tabs__active-bar {
    width: 79px;
  }
  .el-tabs__item {
    font-size: 20px;
    font-weight: 600;
    opacity: 0.8;
  }
}
.text-tabs {
  margin-left: -40px;
  margin-bottom: 20px;
}
::v-deep .el-dialog__header {
  // background: yellow;
  display: none;
}
// ::v-deep .el-dialog__close {
// }
.el-dialog {
  position: relative;
  .el-icon-close {
    cursor: pointer;
    position: absolute;
    right: 0px;
    top: 8px;
    color: #f2aa04;
    font-size: 30px;
    &:hover {
      color: #ffffff;
    }
  }
}
::v-deep .el-dialog__body {
  padding: 0;
  border-radius: 10px;
}
.type1 {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 20px 30px;
  .type1-item {
    margin: 0 10px;
    width: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    img {
      width: 60px;
      height: 60px;
    }
    .name {
      max-width: 110px;
      font-size: 18px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: rgba(0, 0, 0, 0.85);
      line-height: 22px;
      margin: 10px 0;
      /*1. 先强制一行内显示文本*/
      white-space: nowrap;
      /*2. 超出的部分隐藏*/
      overflow: hidden;
      /*3. 文字用省略号替代超出的部分*/
      text-overflow: ellipsis;
    }
    .num {
      font-size: 40px;
      font-family: PingFang-SC-Bold, PingFang-SC;
      font-weight: bold;
      color: #3669d4;
      line-height: 56px;
      margin-bottom: 10px;
    }
  }
}
.type2 {
  .type2-head {
    width: 100%;
    padding: 10px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #10b767;
    .name {
      font-size: 22px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #ffffff;
      line-height: 30px;
      margin-left: 20px;
      max-width: 200px;
      /*1. 先强制一行内显示文本*/
      white-space: nowrap;
      /*2. 超出的部分隐藏*/
      overflow: hidden;
      /*3. 文字用省略号替代超出的部分*/
      text-overflow: ellipsis;
    }
    .el-rate {
      margin-right: 30px;
    }
  }
  // .type2-table {
  //   padding: 10px 20px;
  //   .header-flex {
  //     display: flex;
  //     align-items: center;
  //     justify-content: center;
  //     img {
  //       margin-left: 5px;
  //       width: 16px;
  //       height: 16px;
  //     }
  //   }
  //   .measure {
  //     .measure-inline {
  //       width: 100%;
  //       align-items: center;
  //       flex-wrap: wrap;
  //       display: flex;
  //       margin-bottom: 5px;
  //     }
  //   }
  // }
  .type2-content {
    padding: 10px 20px;
    .textS {
      font-size: 16px;
      line-height: 24px;
    }
    .textR {
      text-align: right;
    }
    .textL {
      text-align: left;
    }
  }
}
</style>
